import React from 'react'
import { Card, Row, Col, Statistic, Button, Space } from 'antd'
import {
  FileTextOutlined,
  ProjectOutlined,
  ClockCircleOutlined,
  EditOutlined,
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { useUserStore } from '@/stores'

const HomePage: React.FC = () => {
  const navigate = useNavigate()
  const { user } = useUserStore()

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">
          欢迎回来，{user?.name || user?.email || '用户'}！
        </h1>
        <p className="text-gray-600 mt-2">这是您的工作台概览</p>
      </div>

      <Row gutter={[16, 16]} className="mb-6">
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="项目总数"
              value={12}
              prefix={<ProjectOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="文章总数"
              value={48}
              prefix={<FileTextOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="今日创作"
              value={3}
              prefix={<EditOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="本周活跃"
              value={15}
              suffix="小时"
              prefix={<ClockCircleOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} md={16}>
          <Card title="快速开始" className="mb-4">
            <Space size="middle">
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={() => navigate('/editor')}
              >
                开始创作
              </Button>
              <Button
                icon={<ProjectOutlined />}
                onClick={() => navigate('/projects')}
              >
                查看项目
              </Button>
              <Button
                icon={<FileTextOutlined />}
                onClick={() => navigate('/templates')}
              >
                浏览模板
              </Button>
            </Space>
          </Card>

          <Card title="最近项目">
            <div className="text-gray-500 text-center py-8">
              暂无最近项目
            </div>
          </Card>
        </Col>

        <Col xs={24} md={8}>
          <Card title="系统公告">
            <div className="text-gray-600">
              <p className="mb-2">🎉 欢迎使用AI写作平台！</p>
              <p className="mb-2">📝 新版编辑器已上线</p>
              <p>🚀 支持多种AI模型切换</p>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default HomePage